<template>
  <!--实名认证-->
  <div class="l-box">
    <p class="l-title-name">转赠</p>

    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>钱包地址：</span>
      </div>
      <input ref="address" type="text" placeholder="请输入钱包地址">
    </div>

    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>提取数量：</span>
      </div>
      <input ref="num" type="text" placeholder="请输入提取数量">
    </div>

    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>支付密码：</span>
      </div>
      <input class="l-veritfy" ref="password" type="password" placeholder="请输入支付密码">
      <span data-name="paypassword" @click="router" class="l-btn-verify">立即设置</span>
    </div>



    <div class="l-btn-ground">
      <div @click="submit" class="l-btn-submit">确定</div>
      <div data-name="account"  @click="router" class="l-btn-return">返回</div>
    </div>
  </div>
</template>

<script>
  import {Toast} from "mint-ui"
  import api from '@/api/login'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: "extract",
    data () {
      return {
      }
    },
    components: {
    },
    computed: {
      ...mapState(['person'])
    },
    methods: {
      ...mapActions(['saveUserInfo']),
      submit () {
        let data = {}
        data['address'] = this.$refs.address.value
        data['num'] = this.$refs.num.value
        data['password'] = this.$refs.password.value

        if(!data['address']) {
          Toast({
            message: "钱包地址不能为空",
            duration: 1000,
            position: "middle"
          })
        } else if (!data['num']) {
          Toast({
            message: "转赠数量不能为空",
            duration: 1000,
            position: "middle"
          })
        } else if (data['num'] > this.person.userInfo.privateCoin)  {
          Toast({
            message: "转赠数量不能超过余额",
            duration: 1000,
            position: "middle"
          })
        } else if (!data['password']) {
          Toast({
            message: "支付密码不能为空",
            duration: 1000,
            position: "middle"
          })
        } else {
          // ajax
          let formdata = new FormData
          formdata.append('id', this.person.userInfo.id)
          formdata.append('GetID', data['address'])
          formdata.append('Num', data['num'])
          formdata.append('PayPwd', data['password'])
          api.post("user/givePrivateCoin/create", formdata, {'isToken': true}).then(res => {
            Toast({
              message: "转赠成功"
            })

            this.saveUserInfo(res)
            this.$router.push({name: "account"})
          })
        }
      },
      router (e) {
        this.$router.push({name: e.target.dataset.name})
      }
    }
  }
</script>

<style lang="less" scoped>

  .l-box {
    border: 1px solid #9e7032;
    width: 700px;
    padding: 40px 10px;
    margin: auto;
    box-sizing: border-box;
  }
  .l-title-name {
    font-size: 40px;
    color: #9e7032;
    font-weight: bold;
    margin-bottom: 40px;
  }

  .l-filed {
    display: flex;
    height: 70px;
    line-height: 70px;
    color: #9e7032;
    margin-bottom: 40px;
    font-size: 28px;

    .l-label {
      width: 180px;
    }

    input {
      outline: none;
      border: 1px solid #9e7032;
      width: 460px;
      padding-left: 20px;
      background-color: #fefef1;
      font-size: 24px;
    }

    .l-veritfy {
      width: 240px;
    }

    .l-btn-verify {
      width: 180px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      text-align: center;
      color: #fff;
      background-color:  #000;
      border-radius: 45px;
      margin-left: 20px;
      font-size: 24px;
    }
    .l-color-red {
      color: red;
    }
  }

  .l-btn-ground {
    margin-left: 194px;
    margin-bottom: 40px;
    display: flex;

    .l-btn-submit, .l-btn-return {
      width: 180px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 32px;
      background-color: #986d33;
      color: #fff;
      border-radius: 45px;
    }
    .l-btn-return {
      margin-left: 20px;
    }
  }

</style>
